<template>
	<view>
		<u-swiper :list="titelListData" :loading='loading' height='200' indicator indicatorMode='dot'
			indicatorInactiveColor='rgba(0, 0, 0, 0.35)' :autoplay='false' @change="e => current = e.current">
			<view slot="indicator" class="indicator">
				<view class="indicator__dot" v-for="(item, index) in titelListData" :key="index"
					:class="[index === current && 'indicator__dot--active']">
				</view>
			</view>

		</u-swiper>
		<u-tabs :list="cate" scrollable @change='changCategory' itemStyle="width:25%;height:100rpx;padding:0"></u-tabs>
		<u-grid :border="false" col="2">
			<u-grid-item v-for="item,index in mainListData" :key="item.id"  class='listChildLayout'>
				<Attr :item='item' @click.native="changRouter(item)"></Attr>
			</u-grid-item>
			<!-- #ifndef MP-WEIXIN -->
			<u-grid-item class='listChildLayout' v-for="index,item in weichatData" :key='index' v-show="mainListData.length == 0">
				<view class="hidden"style="overflow: hidden;">
					<u-skeleton 	
						title
						titleHeight="0"
						titleWidth="0"
						:rowsWidth="['70%','90%','90%']"
						:rowsHeight="[170,25,25]"
					    rows="3"
						loading
						style="display: flex;justify-content: center;"
					></u-skeleton>
				</view>
					
			</u-grid-item>
			<!-- #endif -->
			
		</u-grid>
		</u-row>
	</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				current: 0,
				titelListData: [],
				mainListData:[],
				weichatData:[],
				nowPage:1,
				mode:0,
				cate: [{
					name: '默认'
				}, {
					name: '销量',
					isChacked:0
				}, {
					name: '推荐',
					isChacked:0
				}, {
					name: '最新',
					isChacked:0
				}],
				
			}
		},
		watch:{
			mainListData(){
				if(this.mainListData.length == 0){
					this.weichatData.length = 8
				}
			}	
		},
		onLoad() {
			this.getHomeListData()
		},
		onReachBottom() {
			this.nowPage++
			this.getHomeListData()
		},
		methods: {
			changRouter({id}){
				uni.navigateTo({
					url: `../../pagesLogin/detial/detial?id=${id}`
				})
			},
			async getHomeListData() {
				let arr = [0,0,0]
				arr[this.mode-1] = 1
					const {
						categories,
						goods,
						slides
					} = await uni.$u.api.reqAttrLisstData(this.nowPage,arr)
					if (slides.length > 0) {
						this.titelListData = slides.reduce((value, item) => {
							if (item.img_url) {
								value.push(item.img_url)
							}
							return value
						}, [])
					}
					this.mainListData = this.mainListData.concat(goods.data)
					this.maxpage = goods.to
					this.nowPage = goods.current_page
					this.loading = false
			},
			changCategory({index}) {
				this.mode = index
				this.nowPage = 1
				this.mainListData = []
				this.getHomeListData()
			},

		},
	
	}
</script>

<style lang="scss">
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 20rpx;
			width: 20rpx;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
				width: 40rpx
			}
		}
	}
	/deep/.u-skeleton__wrapper__content{
		align-items: center;
	}
	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
	//#ifdef MP-WEIXIN
	/deep/.u-grid{
		padding-top: 30rpx;
	}
	/deep/.u-grid-item{
		margin: 80rpx 0;
	}
	//#endif
	
	.listChildLayout {
		height: 500rpx;
		display: flex;
		justify-content: center !important;
		align-items: center !important;

		.hidden{
			width: 90%;
			box-shadow: 0px 0px 15rpx #6f6f6f;
			height: 95%;
		}
		.listChildLayout_child {
			
			display: flex;
			flex-direction: column;
			align-items: center;
			overflow: hidden;

			.listChildLayout_child_context {
				flex: 1;
				display: flex;
				flex-direction: column;
				width: 100%;

				.listChildLayout_child_context_titel {
					height: 50%;
					padding-left: 20rpx;
					font-weight: 700;
					display: flex;
					align-items: flex-end;
				}

				.listChildLayout_child_context_pirce {
					height: 50%;
					font-size: 15rpx;
					display: flex;
					padding: 0 20rpx;
					justify-content: space-between;

					.listChildLayout_child_context_pirce_left {
						font-weight: 600;
						color: #dd0000;
						display: flex;
						align-items: center;
					
					}

					.listChildLayout_child_context_pirce_right {
						color: #606266;
						align-items: center;
						display: flex;
						align-items: center;
					}
				}
			}

		}
	}
</style>
